性能优化详解

几个月前面试的时候问我性能优化我可能会开始背诵雅虎军规，加点webp，代码层面稍稍讲点，现在系统的梳理下性能优化的方方面面

本文涉及方面有:

1. 代码优化

2. 网络请求过程角度入手

   • DNS解析

   • TCP建立链接

   • 网络往返时延(RTT)

   • 数据传输

3. 网络问题角度入手

   • 请求数量

   • 流量

4. 性能优化测试工具

代码优化

css代码优化

避免类正则的属性选择器

CSS3添加了复杂的属性选择器，可以通过类正则表达式的方式对元素的属性值进行匹配。当然这些类型的选择器定是会影响性能的，正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=， |=， ^=， $=， 和 ~=语法的属性选择器。

合写CSS

除了压缩的方式，我们还可以通过少写CSS属性来达到减少CSS字节的目的

利用继承CSS

css的继承机制也可以帮我们再一定程度上缩减字节数，我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性，子容器会默认也使用这些属性，因此如果我们希望全文字体尺寸是14px，大可不必为每个容器设置，只需要在body上设置就可以了。应用这个技巧，把CSS属性在可能的情况下提到父容器是可以帮我们节省CSS字节的，顺便说一下哪些属性可以继承

• 所有元素可继承：visibility和cursor

• 内联元素和块元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

• 块状元素可继承：text-indent和text-align

• 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

• 表格元素可继承：border-collapse

• 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before

不用CSS表达式

不乱用CSS reset或属性设置

避免适用通配符或隐式通配符

javascript代码优化

尽量使用原生方法

javaScript是解释性语言，相比编译性语言执行速度要慢。浏览器已经实现的方法，就不要再去实现一遍了。另外，浏览器已经实现的方法在算法方面已经做了很多优化

不要类型转换

JavaScript是动态类型，但如果你想提高速度不要使用该功能。尽量保持变量的类型一致。这也适用于数组，尽管主要是由浏览器都进行了优化,但尽量不要混用不同类型的数组

避免使用不支持的语法

优化编译器不支持一些特定的语句, 使用这些语法会使包含它的函数无法得到优化.
有一点请注意, 即使这些语句无法到达或者不会被执行, 它们也会使相关函数无法被优化
目前不会被优化的有:

• generator 函数

• 包含 for...of 语句的函数

• 包含 try...catch 的函数

• 包含 try...finally 的函数

• 包含复合 let 赋值语句的函数 (原文为 compound let assignment)

• 包含复合 const 赋值语句的函数 (原文为 compound const assignment)

• 包含含有 __proto__ 或者 get/set 声明的对象字面量的函数

可能永远不会被优化的有:

• 包含 debugger 语句的函数

• 包含字面调用 eval() 的函数

• 包含 with 语句的函数

处理方法

之前提到过的一些语句在生产环境中是无法避免的, 比如 try...finally 和 try...catch. 为了是代价最小, 它们必须被隔离到一个最小化的函数, 以保证主要的代码不受影响.

使用微类库

通常开发者都会使用JavaScript类库，如jQuery、Mootools、YUI、Dojo等，但是开发者往往只是使用JavaScript类库中的部分功能。为了更大的提升性能，应尽量避免使用这类大而全的类库，而是按需使用微类库来辅助开发

用做标记的变量尽可能使用布尔类型

直接用true和false做标记，不要使用数字或者字符串的1和0来做标记。

jquery最佳实践

jquery最佳实践笔记

网络请求角度入手

正常的一次网络请求会经历4个过程，分别是：DNS解析 -> TCP建立链接 -> 网络往返时延(RTT) -> 数据传输，面临的挑战可以总结为时延较高、带宽有限、流量有成本，具体各过程面临的挑战和优化措施如下。

1. DNS解析

   • 主要挑战：解析耗时长

   • 优化措施

     1. 减少域名

     2. 首屏在3个域名内

     3. 减少DNS查找，避免重定向。浏览器DNS缓存 、计算机DNS缓存、 服务器DNS缓存、使用Keep-Alive特性 来减少DNS查找。

        
        

   参考资料: DNS解析

2. TCP连接

   • 主要挑战：除了TCP握手会多一次网络往返，另外在移动端网络建立TCP链接前，还需要进行信令的交互，在2G环境下影响最为明显

   • 优化措施（复用）

     1. HTTP2.0多路复用
        HTTP/2 可以很容易的去实现多流并行而不用依赖建立多个 TCP 连接，HTTP/2 把 HTTP 协议通信的基本单位缩小为一个一个的帧，这些帧对应着逻辑流中的消息。并行地在同一个 TCP 连接上双向交换消息。

           单连接多资源的方式，减少服务端的链接压力,内存占用更少,连接吞吐量更大
           由于 TCP 连接的减少而使网络拥塞状况得以改善，同时慢启动时间的减少,使拥塞和丢包恢复速度更快
        

     2. HTTP1.1持久连接
        
        

   参考资料：知乎HTTP2.0

3. 网络往返时延(RTT)

   • 主要挑战：耗时长

   • 优化措施（复用、合并、就近接入）

     1. 就近接入

        • 静态资源：接入CDN

        • 动态数据
          接入移动运营商和小运营商反向代理进行加速

     2. 合并请求，减少请求数量

        • 首屏禁止301、302跳转

        • 合并样式和脚本

        • 使用css图片精灵

        • 首屏必须小图片使用base64格式内嵌入HTML

        • 初始首屏之外的图片资源按需加载，静态资源延迟加载

        • 合并外联代码

     3. 缓存

        • 抽出公共代码复用缓存

        • 使用LocalStorage等缓存数据

        • 图片/外链代码开启缓存
          
          

   参考资料：知乎合并 HTTP 请求是否真的有意义？

4. 数据传输

   • 主要挑战：带宽有限、流量有成本

   • 优化措施（复用、压缩、分包）

     1. 压缩

        • 图片优化

          不需要背景透明的采用jpg代替png
          使用webp
          使用合适尺寸的图片，而不是对图片进行拉伸

        • 开启GZIP

        • 压缩代码

        • 静态资源使用不带cookie的域名

     2. 复用
        HTTP 304

网络问题角度入手

页面在网络上遇到的问题可以总结为一个或多个网络请求以及每个请求的流量问题，在请求数量以及每个请求的流量固定的情况下，可以通过优化请求顺序以及合理划分流量来提升用户体验，请求顺序和流量划分通常遇到的问题和优化措施如下。

1. 请求

2. • 主要挑战：
     没有充分利用有限的并发数量，串行加载数据
     可以预先加载的操作没有预先加载
     无用请求抢占并发数量

   • 优化

     1. DNS的预解析
        可以通过用meta信息来告知浏览器, 我这页面要做DNS预解析

        <meta http-equiv="x-dns-prefetch-control" content="on" />

        可以使用link标签来强制对DNS做预解析:

        <link rel="dns-prefetch" href="http://ke.qq.com/" />

     2. HTTP管线化
        HTTP管线化可以克服同域并行请求限制带来的阻塞，它是建立在持久连接之上，是把所有请求一并发给服务器，但是服务器需要按照顺序一个一个响应，而不是等到一个响应回来才能发下一个请求，这样就节省了很多请求到服务器的时间。不过，HTTP管线化仍旧有阻塞的问题，若上一响应迟迟不回，后面的响应都会被阻塞到。

     3. 删除无用请求

1. 流量

   • 主要挑战：各种流量混在一起加载，流量之间没有优先级

   • 优化措施（延迟加载）

     1. 延迟加载非首屏代码(拆分首屏css，首屏js)

     2. 延迟加载非首屏数据
        懒加载，屏幕滚动到才加载

     3. 延迟加载非首屏图片
        轮播图片等第一张图片加载后再加载后面其他图片

网站性能工具

YSLOW
会按照雅虎军规分析网站
Page Speed Online
Google Page Speed 是当下很流行的在线测试网站性能工具，基于Google的一套最佳的前端性能的规则，你可以很方便得到大量的性能信息，甚至还提供了移动设备的最佳实践报告。
Show Slow
它能从三个流行的测试工具YSlow，Page Speed和DynaTrace定期获取测试数据进行总结对比，免费，但需要注册。